<template>
  <el-dialog
    title="核查"
    :visible.sync="value"
    width="100%"
    top="0vh"
    :before-close="beforeClose"
  >
    <div class="dialog-container">
      <div class="form">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="任务类型" prop="checkTaskTypeList">
            <el-select
              v-model="form.checkTaskTypeList"
              placeholder="请选择"
              multiple
            >
              <el-option
                v-for="(it, ind) in checkTaskTypeDict"
                :key="ind"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支撑单位" prop="supportUnitCode">
            <el-select v-model="form.supportUnitCode" placeholder="请选择">
              <el-option
                v-for="(it, ind) in supportUnitDict"
                :key="ind"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务期限" prop="taskTerm">
            <el-input
              v-model="form.taskTerm"
              placeholder="请输入任务期限"
            ></el-input>
          </el-form-item>
          <el-form-item label="检查单位" prop="checkEnterpriseList">
            <el-input
              :value="unitNameStr"
              placeholder="请查找检查单位"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="submit-btn" @click="submit">
              确认
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-part">
        <div class="search-form">
          <el-form
            ref="searchForm"
            :model="searchForm"
            inline
            label-position="top"
          >
            <el-form-item class="form-item" prop="unitName" label="企业名称">
              <el-input
                v-model="searchForm.unitName"
                type="text"
                placeholder="请输入企业"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="form-item"
              prop="supportUnitCode"
              label="支撑单位"
            >
              <el-select
                v-model="searchForm.supportUnitCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="(it, ind) in supportUnitDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="form-item"
              prop="industryLabelCode"
              label="行业"
            >
              <el-select
                v-model="searchForm.industryLabelCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="(it, ind) in labelHybqDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item" prop="unitStreet" label="街道">
              <el-select v-model="searchForm.unitStreet" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in unitStreetDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="form-btn">
            <el-button type="text" @click="resetSearchForm">重置</el-button>
            <el-button @click="search">搜索</el-button>
          </div>
        </div>
        <div class="check-list">
          <div class="all-check">
            <div class="left">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
            </div>
            <div class="right">
              <el-pagination
                layout="prev,slot, next"
                :total="total"
                @current-change="currentChange"
              >
                <!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
                <span class="current">{{ pageNum }}</span>
                <span class="total">
                  /{{
                    total % pageSize == 0
                      ? total / pageSize
                      : Math.ceil(total / pageSize)
                  }}
                </span>
                <!-- <el-button type="text" class="next">下一页</el-button> -->
              </el-pagination>
            </div>
          </div>
          <el-checkbox-group
            v-model="unitNames"
            @change="handleCheckedCitiesChange"
          >
            <el-row>
              <el-col
                style="margin-bottom: 15px"
                :span="8"
                v-for="(item, index) in dataList"
                :key="index"
              >
                <el-checkbox :label="item.unitName">{{
                  item.unitName
                }}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { manageGetEnterpriseList, commitCheckTask } from '@/api/enterprise'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.search()
      }
    }
  },
  computed: {
    checkTaskTypeDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.checkTaskType) {
        list.push({
          label: dict.checkTaskType[value],
          value
        })
      }
      return list
    },
    supportUnitDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.supportUnit) {
        list.push({
          label: dict.supportUnit[value],
          value
        })
      }
      return list
    },
    labelHybqDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.labelHybq) {
        list.push({
          label: dict.labelHybq[value],
          value
        })
      }
      return list
    },
    unitStreetDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.unitStreet) {
        list.push({
          label: dict.unitStreet[value],
          value
        })
      }
      return list
    },
    unitNameStr() {
      return this.unitNames.join(',')
    }
  },
  data() {
    return {
      form: {
        checkTaskTypeList: [],
        supportUnitCode: '',
        taskTerm: '',
        checkEnterpriseList: []
      },

      rules: {
        taskTerm: [
          {
            message: '请输入正整数',
            trigger: 'blur',
            pattern: /^([1-9]\d*)$/
          }
        ]
      },
      checkAll: false,
      unitNames: [],
      dataList: [],
      isIndeterminate: false,
      searchForm: {
        unitName: '',
        supportUnitCode: '',
        industryLabelCode: '',
        unitStreet: ''
      },
      total: 0,
      pageNum: 1,
      pageSize: 12
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.unitNames = val ? this.dataList.map((item) => item.unitName) : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.dataList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.unitNames.length
    },
    resetSearchForm() {
      this.searchForm = {
        unitName: '',
        supportUnitCode: '',
        industryLabelCode: '',
        unitStreet: ''
      }
    },
    search() {
      this.pageNum = 1
      this.getListCheckTask()
    },
    getListCheckTask() {
      manageGetEnterpriseList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        this.dataList = res.data.list
        this.total = res.data.total
      })
    },
    currentChange(page) {
      this.pageNum = page
      this.getListCheckTask()
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = {
            ...this.form,
            checkEnterpriseList: []
          }
          if (this.unitNames.length) {
            this.dataList.forEach((item) => {
              this.unitNames.forEach((name) => {
                if (item.unitName === name) {
                  params.checkEnterpriseList.push({
                    enterpriseId: item.id,
                    unitOrgCode: item.unitOrgCode,
                    unitName: item.unitName
                  })
                }
              })
            })
          }
          commitCheckTask(params).then((res) => {
            this.$message.success('添加成功')
            this.beforeClose()
          })
        }
      })
    },
    beforeClose() {
      this.form = {
        checkTaskTypeList: [],
        supportUnitCode: '',
        taskTerm: '',
        checkEnterpriseList: []
      }
      this.checkAll = false
      this.unitNames = []
      this.dataList = []
      this.resetSearchForm()
      this.$emit('input', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-container {
  display: flex;
  .form {
    ::v-deep .el-form-item {
      .el-input__inner {
        background: rgba(0, 8, 34, 0.05);
        border: none;
      }
    }
    .submit-btn {
      width: 100%;
      height: 44px;
      background: #1c4088;
      box-shadow: 0px 4px 48px 32px rgba(6, 23, 80, 0.05);
      border-radius: 4px 4px 4px 4px;
      color: #ffffff;
    }
  }
  .content-part {
    background: #ffffff;
    box-shadow: 0px 4px 64px 32px rgba(0, 0, 0, 0.05);
    border-radius: 4px 4px 4px 4px;
    margin-left: 30px;
    flex: 1;
    .search-form {
      border-radius: 4px 4px 0 0;
      display: flex;
      justify-content: space-between;
      padding: 20px;
      background: #1c4088;

      .form-item {
        width: 190px;
        margin-bottom: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.3);

        &:first-child {
          border: none;
        }
      }

      .form-btn {
        height: 72px;
        display: flex;
        align-items: center;
        margin-bottom: 0;

        .el-button--text {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
        }

        .el-button--default {
          width: 80px;
          height: 40px;
          background: #000822;
          border-radius: 4px 4px 4px 4px;
          font-size: 16px;
          color: #ffffff;
          border: none;
        }
      }

      ::v-deep .el-form-item {
        .el-form-item__label {
          color: #ffffff;
          padding: 0 15px;
        }

        .el-input__inner {
          background: #1c4088;
          border: none;
          color: #ffffff;
        }
      }
    }
    .check-list {
      padding: 20px 20px 0 20px;
      .all-check {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .right {
          text-align: center;
          color: #000822;
          font-size: 14px;
          span {
            min-width: auto;
          }
          .current {
            color: #1c4088;
            font-size: 16px;
          }
          .prev {
            color: rgba(0, 8, 34, 0.6);
            margin-right: 40px;
          }
          .next {
            color: rgba(0, 8, 34, 0.6);
            margin-left: 40px;
          }
          // ::v-deep {
          //   .el-pagination .btn-prev {
          //     padding-right: 0;
          //   }
          //   .el-pagination .btn-next {
          //     padding-left: 0;
          //   }
          // }
        }
      }
    }
  }
}
</style>